<template>
 <div class="layerTree">
        <div class="title">图层目录</div>
        <el-tree
            ref="treeInstance"
            node-key="id"
            tyle="max-width: 600px"
            :data="docData"
            :props="defaultProps"
            show-checkbox
            :default-expanded-keys="[nodeId]"
            @check-change="handleCheckChange"
        >
            <template #default="{ node, data }">
                <span class="customTreeNode">
                    <img :src="getIconUrl(data.GeomType)" alt="" />
                    <span>{{ node.label }}</span>
                </span>
            </template>
        </el-tree>
    </div>
</template>

<script setup >
import {ref,getCurrentInstance,onMounted,nextTick} from 'vue'
import {getMapDocInfo,getLayersInfo} from '@/api/mapgis-api/index'
 let nodeId = 1;//节点id
 //地图文档服务
 let service = {
    docName : import.meta.env.VITE_MAPGIS_DOC_NAME,
 }
 //el-tree 数据
 const docData = ref([
    {
        id:nodeId++,
        label:"文档名称",
        disabled:true,
        children:[],
    }
 ])
 const defaultProps={
    children:"children",
    label:"label",
 }
 //默认选中节点
 const treeInstance = ref(null);
 const {proxy} = getCurrentInstance();
 let map=null
 onMounted(async()=>{
    //获取地图实例
    map = proxy.$map;
    //获取地图文档信息
    let docInfo = await getMapDocInfo(service.docName);
    // console.log("获取地图文档信息",docInfo);
    //获取图层信息
    docData.value[0] = {
        id:nodeId++,
        label:docInfo.Title,
        disabled:true,
        children:[],
    };
    //获取图层信息
    let layersInfo = await  getLayersInfo(service.docName);
    docData.value[0].children = layersInfo.value.map((item)=>{
        return {
            id:nodeId++,
            LayerIndex:item.LayerIndex,
            label:item.Name,
            children:[],
            GeomType:item.GeomType

        }
    })
    //默认选中节点:下一次渲染的时才生效
    nextTick(()=>{
        treeInstance.value.setCheckedKeys([docData.value[0].id]);
    })
 })

 //图标映射
 const iconMap={
    Pnt:"Point.png",
    Lin:"Line.png",
    Reg:"Polygon.png",
 }
 //更具GeomType获取图标
 const getIconUrl = (GeomType)=>{
   const iconUrl = new URL(`../../../assets/images/${iconMap[GeomType]}`,import.meta.url).href;
   return iconUrl
 }
 //节点点击逻辑 控制图层显示和隐藏
 const handleCheckChange = (data,checked)=>{
    const layers = map.getLayers().getArray();
    const mapgisLayer = layers.find((item)=>{
        return item.get('title')==="mapgi图层"
    })
    //设置目标图层的显示和隐藏
    mapgisLayer.setLayerStatus(
        data.LayerIndex,
        checked?"include":"exclude"
    )
 }
</script>

<style lang="scss" scoped>
  .layerTree {
    position: absolute;
    top: 150px;
    left: 10px;
    width: 250px;
    height: 400px;
    background-color: #fff;
    border-radius: 0 20px 20px 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}
.title {
    height: 40px;
    background-color: #2196f3;
    padding-left: 20px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    line-height: 40px;
}
:deep(.el-tree) {
    background-color: transparent;
}
.customTreeNode {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.customTreeNode img {
    padding-right: 10px;
}
</style>